<template>
	<page-meta :root-font-size="`${fontSize}px`"></page-meta>
    <view class="voteMsg">
        <view class="title">投票介绍</view>
        <image class="bg" src="../../static/images/bg.png"></image>
        <image class="bg2" src="../../static/images/zt.png"></image>
        <view class="text2">{{ msg.title }}</view>
        <view class="text" v-html="msg.content"></view>
        <image class="button" src="../../static/images/anniu.png" @click="startVote"></image>
        <view class="txt" @click="goDetail">投票结果</view>
    </view>
</template>
<script>
import { mapState } from 'vuex'
export default {
    computed: {
		...mapState(['fontSize'])
	},
    data() {
        return {
            id: "",
            msg: {}
        }
    },
    onLoad(options) {
        this.id = options.id;
        this.getList(options.id)
    },
    methods: {
        startVote() {
            uni.navigateTo({
                url: '/vote/index/startVote?id=' + this.id
            })
        },
        goDetail() {
            uni.navigateTo({
                url: '/vote/index/voteResult?id=' + this.id
            })
        },
        getList(id) {
            this.$http2.post('vx/ywh/vote/info', { id: Number(id) }).then(res => {
                if (res.code === 10000) {
                    this.msg = res.data
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.voteMsg {
    height: 100vh;

    .bg {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .bg2 {
        width: 750rpx;
        height: 730rpx;
        margin-top: 110rpx;
    }

    .text {
        width: 690rpx;
        height: 245rpx;
        background: #E76343;
        border: 3px solid rgba(248, 226, 231, 0.4);
        border-radius: 20rpx;
        margin: 0 auto;
        padding: 30rpx;
        overflow: auto;

        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 45rpx;
    }

    .button {
        width: 576rpx;
        height: 160rpx;
        position: absolute;
        bottom: 11%;
        left: 50%;
        margin-left: -288rpx;
        z-index: 1;
    }

    .txt {
        color: #872B0C;
        text-align: center;
        width: 100%;
        position: absolute;
        bottom: 8%;
    }

    .title {
        color: #fff;
        font-size: 40rpx;
        padding-top: 110rpx;
        text-align: center;
    }

    .text2 {
        color: #fff;
        font-size: 66rpx;
        text-align: center;
        padding: 0 20rpx;
        position: absolute;
        top: 180rpx;
        font-weight: bold;
        text-shadow: 0rpx 5rpx 20rpx #f03658;
    }
}</style>
